<template>
  <header-footer
    :commonData="{ $parent: $parent, indexLogo: 1, indexLittleApp: 1 }"
  >
    <el-container class="containall">
      <el-header
        class="contain_header"
        style="padding: 0; height: 200px; width: 100% position: relative"
      >
        <img
          src="/static/img/indexnew/banner.png"
          style="width: 100%; height: 100%"
        />

        <div class="zuixintonggao row">
          <div class="zuixintonggao_1">
            关于开展2021年10月至2022年3月到期的建筑施工特种作业持证人员继续教育和延期验印工作的通知
          </div>
          <button class="zuixintonggao_2">最新通告</button>
        </div>
      </el-header>
      <el-main>
        <p
          class="jixu"
          style="font-size: 40px; font-weight: 500; color: #333333"
        >
          继续教育报名
        </p>

        <div class="indexTab row">
          <div class="jzs">
            <img
              src="/static/img/indexnew/tab.png"
              class="indexTabImg"
              width="285px"
              height="10px"
              alt=""
            />
            <div class="jzs1">一级建造师</div>
            <div class="libm">立即报名</div>
          </div>
          <div class="jzs">
            <img
              src="/static/img/indexnew/tab.png"
              class="indexTabImg"
              width="285px"
              height="10px"
              alt=""
            />
            <div class="jzs1">一级建造师</div>
            <div class="libm">立即报名</div>
          </div>
          <div class="jzs">
            <img
              src="/static/img/indexnew/tab.png"
              class="indexTabImg"
              width="285px"
              height="10px"
              alt=""
            />
            <div class="jzs1">一级建造师</div>
            <div class="libm">立即报名</div>
          </div>
          <div class="jzs">
            <img
              src="/static/img/indexnew/tab.png"
              class="indexTabImg"
              width="285px"
              height="10px"
              alt=""
            />
            <div class="jzs1">一级建造师</div>
            <div class="libm">立即报名</div>
          </div>
        </div>
        <p
          class="jixu"
          style="font-size: 40px; font-weight: 500; color: #333333"
        >
          通知公告
        </p>

        <!-- 通知公告部分 -->
        <div class="tzgg row">
          <div class="ckgd">
            <img
              class="imggd"
              src="/static/img/indexnew/more.png"
              width="80px"
              height="80px"
              alt=""
            />
            <p style="font-size: 24px; color: #fff">查看更多</p>
          </div>
          <div class="message">
            <ul class="hangwezi">
              <li>
                <div class="datehezi">
                  <span style="font-size: 34px">14</span>
                  /09/2021
                  <span class="itemhezi" style="font-size: 24px">
                    关于开展2021年10月至2022年3月到期的建筑施工特种作业持证人员继续教育和延期验印工作的通知
                  </span>
                </div>
              </li>
              <li>
                <div class="datehezi">
                  <span style="font-size: 34px">14</span>
                  /09/2021
                  <span class="itemhezi" style="font-size: 24px">
                    关于开展2021年10月至2022年3月到期的建筑施工特种作业持证人员继续教育和延期验印工作的通知
                  </span>
                </div>
              </li>
              <li>
                <div class="datehezi">
                  <span style="font-size: 34px">14</span>
                  /09/2021
                  <span class="itemhezi" style="font-size: 24px">
                    关于开展2021年10月至2022年3月到期的建筑施工特种作业持证人员继续教育和延期验印工作的通知
                  </span>
                </div>
              </li>
              <li>
                <div class="datehezi">
                  <span style="font-size: 34px">14</span>
                  /09/2021
                  <span class="itemhezi" style="font-size: 24px">
                    关于开展2021年10月至2022年3月到期的建筑施工特种作业持证人员继续教育和延期验印工作的通知
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 登录状态 -->
    <div>
      <router-link to="/login"  class="denglu">
        <img
          src="/static/img/indexnew/lijidenglu.png"
          width="40px"
          height="40px"
        />
        <span
          style="
            font-size: 34px;
            font-weight: 600;
            color: #ffffff;
            margin-left: 16px;
          "
          >立即登录</span
        >
      </router-link>
    </div>
    <img src="/static/img/indexnew/lianxius.png" class="fixedTelephone" />
  </header-footer>
</template>
<script>
import headerFooter from "../components/header_and_footer.vue";

export default {
  components: {
    headerFooter: headerFooter,
  },
  data() {
    return {
      browser: false,
      showMoviesFeng: true,
      flashShowDialog: false,
      indexDialog: false,
      news: [],
      imgCover: "/static/img/indexMovies.png",
      getProjects: [],
      ulLeft: 0,
      ulWidth: 0,
      num: 0,
      newsFirdt: "",
    };
  },
};
</script>

<style scoped="scoped">
.fill {
  width: 100%;
  height: 100%;
  display: flex;
}

.col {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
}

.flex_between {
  display: flex;
  justify-content: space-between;
}

.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.noticBox {
  cursor: pointer;
  width: 1200px;
  height: 62px;
  background: #ffffff;
  box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.08);
  position: absolute;
  bottom: -32px;
  left: 50%;
  margin-left: -600px;
}

.noticBoxTitle {
  flex: 1;
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 20px;
  font-weight: 400;
  color: #333333;
}

.noticLookBtn {
  width: 138px;
  background-color: #3b89cc;
  text-align: center;
  height: 62px;
  font-size: 22px;
  font-weight: 500;
  color: #ffffff;
  border: 0;
  outline: none;
  border-radius: 0;
}

.indexTabItem {
  width: 285px;
  height: 170px;
  background: #ffffff;
  box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.06);
  margin-right: 20px;
}

.indexTabItem:last-child {
  margin-right: 0;
}

.indexTab {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 60px;
}

.indexTabItem {
  cursor: pointer;
  position: relative;
}

.indexTabItemTitle {
  height: 108px;
  line-height: 108px;
  text-align: center;
  font-size: 26px;
  font-weight: 500;
  color: #333333;
}

.indexTabItemBtn {
  height: 60px;
  line-height: 60px;
  border-top: 1px solid #cccccc;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  color: #3b89cc;
}

.indexTab .indexTabItem:hover .indexTabItemBtn {
  background: #3b89cc !important;
  color: #ffffff !important;
  border-top: 1px solid #3b89cc !important;
}

.indexTab .indexTabItem:hover .indexTabImg {
  display: block;
}

.indexTabImg {
  position: absolute;
  top: 0;
  display: none;
}

.onlinestydu {
  width: 100%;
  text-align: center;
  height: 420px;
  background-image: url("/static/img/indexnew/online.png");
}

.onlinestudyBtn {
  cursor: pointer;
  font-size: 34px;
  font-weight: 500;
  color: #3b89cc;
  margin: 0 auto;
  width: 1200px;
  height: 104px;
  display: flex;
  align-items: center;
  background: #ffffff;
  box-shadow: 2px 2px 10px 2px rgba(255, 255, 255, 0.06);
}

.noticTongzhi {
  width: 100%;
  margin: 0 auto;
  background-color: #f5f5f5;
  text-align: center;
  padding-bottom: 132px;
}

.noticleft {
  cursor: pointer;
  width: 274px;
  height: 382px;
  background-image: url("/static/img/indexnew/morebg.png");
  /* background: #000000; */
  /* opacity: 0.5; */
  margin-right: 30px;
}

.noticright {
  height: 383px;
  overflow: hidden;
  flex: 1;
  border: 1px solid #cccccc;
}

.noticItem {
  height: 60px;
  line-height: 60px;
  cursor: pointer;
}

.noticItemTime {
  font-size: 16px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #333333;
  margin-right: 10px;
  padding: 0 10px;
}

.noticItemTime span {
  font-size: 34px;
}

.noticItemTitle {
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.noticItem:hover {
  padding: 10px 0;
}

.noticItem:hover .noticItemTime {
  background-color: #3b89cc;
  color: #ffffff;
}

.noticItem:hover .noticItemTitle {
  color: #3b89cc !important;
}

.fixedBox {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 97px;
  background: #3b89cc;
  box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.26);
  border-radius: 6px;
  position: fixed;
  top: 47%;
  right: 20px;
}

.fixedBox a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fixedTelephone {
  width: 416px;
  height: 122px;
  position: fixed;
  top: 66%;
  right: 0;
}
.zuixintonggao {
  width: 1200px;
  height: 62px;

  margin: 0 auto;
  position: relative;
  bottom: 32px;
  background-color: brown;
  left: 50%;
  margin-left: -600px;
  text-align: center;

  cursor: pointer;
}
.zuixintonggao_1 {
  width: 1200px;
  height: 62px;
  background-color: #f1f0f0;
  /* 盒子内文字垂直居中  设置line—height 为盒子高度即可  不要100% */
  line-height: 62px;
}
.zuixintonggao_2 {
  width: 300px;
  height: 62px;

  width: 138px;
  background-color: #3b89cc;
  text-align: center;
  height: 62px;
  font-size: 22px;
  font-weight: 500;
  color: #ffffff;
  border: 0;
  outline: none;
  border-radius: 0;
}
.row {
  display: flex;
  flex-direction: row;
}
.col {
  display: flex;
  flex-direction: column;
}
.jixu {
  margin: 60px 0 40px 0;
  text-align: center;
}
.jzs {
  background-color: #cccccc;
  width: 285px;
  height: 170px;
  text-align: center;
  cursor: pointer;
  position: relative;
  margin-right: 20px;
}
.jzs:hover .libm {
  background: #3b89cc !important;
  color: #ffffff !important;
  border-top: 1px solid #3b89cc !important;
}
/* 一级建造师长盒子 */
.indexTab {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 60px;
}
/* 隐藏小图标 */
.indexTabImg {
  position: absolute;
  top: 0;
  display: none;
}
.jzs:hover .indexTabImg {
  display: block;
}
.jzs1 {
  background-color: rgb(248, 242, 242);
  width: 285px;
  height: 108px;

  line-height: 108px;
}
.libm {
  width: 285px;
  height: 61px;
  line-height: 61px;
}

/* 通知公告 */
.tzgg {
  background-color: #ccc;
  width: 1200px;
  height: 385px;
  margin: 0 auto;
  position: relative;

  margin-bottom: 132px;
}
.ckgd {
  background-color: #aaa;
  width: 274px;
  height: 382px;
  background-image: url("/static/img/indexnew/morebg.png");
  cursor: pointer;
  text-align: center;
}
.imggd {
  /* position: absolute; */
  margin-top: 50%;
}
.message {
  height: 385px;
  width: 769px;
  margin-left: 60px;
  background-color: #eee;
  border: 1px solid #CCCCCC;
}
/* 绑定触发动态 */
.datehezi:hover {
  width: 136px;
  height: 62px;
  background-color: #3b89cc;
  color: #ffffff;
}
.datehezi:hover .itemhezi {
  color: #3b89cc;
  margin-left: 30px;
}
.hangwezi {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  cursor: pointer;
}

/* 侧边的登录  联系电话区域 */
.denglu {
  width: 300px;
  height: 97px;
  background-color: #3b89cc;
  border-radius: 15px;
/* 边框定位 */
  position: fixed;
  top: 47%;
  right: 20px;

  /* 这两个也可以水平和垂直居中 只适合文字 */
  /* text-align: center; */
  /* line-height: 97px; */

  display: flex;
  justify-content: center;
  align-items: center;
}
</style>